<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!-- INTERFACE -->
    <composite:interface>
        <composite:attribute name="fieldnumber" required="true"/>
        <composite:attribute name="player" required="true"/>
        <composite:attribute name="fieldcolor" required="true"/>
        <composite:attribute name="startingsquare" required="true"/>
        <composite:attribute name="homebase" required="true"/>
    </composite:interface>
   

    <!-- IMPLEMENTATION -->    
    <composite:implementation>
        <c:if test="#{cc.attrs.fieldcolor==-1 and cc.attrs.startingsquare==false and cc.attrs.homebase==false}">
            <c:if test="#{cc.attrs.player==-1 and cc.attrs.fieldcolor==-1}">                
                <c:choose>
                    <c:when test="#{cc.attrs.fieldnumber==1}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 1" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 1" src="./resources/img/field1.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==11}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 2" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 2"  src="./resources/img/field2.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==21}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 3" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 3"  src="./resources/img/field3.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==31}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 4" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 4"  src="./resources/img/field4.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==40}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 1" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 1" src="./resources/img/field.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==10}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 2" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 2"  src="./resources/img/field.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==20}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 3" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 3"  src="./resources/img/field.png"/></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==30}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 4" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 4"  src="./resources/img/field.png"/></c:when>
                    <c:otherwise><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}"  alt="#{msg.field} #{cc.attrs.fieldnumber}" src="./resources/img/field.png"/></c:otherwise>
                </c:choose>                      
            </c:if>
            <c:if test="#{cc.attrs.player!=-1 and cc.attrs.fieldcolor==-1}">
                <c:choose>
                    <c:when test="#{cc.attrs.fieldnumber==1}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 1: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 1: #{msg.player} #{cc.attrs.player}" src="./resources/img/field1_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==11}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 2: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 2: #{msg.player} #{cc.attrs.player}" src="./resources/img/field2_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==21}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 3: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 3: #{msg.player} #{cc.attrs.player}" src="./resources/img/field3_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==31}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 4: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.firstfield} #{msg.player} 4: #{msg.player} #{cc.attrs.player}" src="./resources/img/field4_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==40}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 1: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 1: #{msg.player} #{cc.attrs.player}" src="./resources/img/field_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==10}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 2: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 2: #{msg.player} #{cc.attrs.player}" src="./resources/img/field_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==20}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 3: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 3: #{msg.player} #{cc.attrs.player}" src="./resources/img/field_player#{cc.attrs.player}.png" /></c:when>
                    <c:when test="#{cc.attrs.fieldnumber==30}"><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 4: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.lastfield} #{msg.player} 4: #{msg.player} #{cc.attrs.player}" src="./resources/img/field_player#{cc.attrs.player}.png" /></c:when>
                    <c:otherwise><img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.player} #{cc.attrs.player}" src="./resources/img/field_player#{cc.attrs.player}.png" /></c:otherwise>
                </c:choose>                  
            </c:if>  
        </c:if>
        <c:if test="#{cc.attrs.startingsquare==true and cc.attrs.homebase==false}">
            <c:if test="#{cc.attrs.player==-1}">
                <img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.startingfield} #{msg.player} #{cc.attrs.fieldcolor}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.startingfield} #{msg.player} #{cc.attrs.fieldcolor}" src="./resources/img/field#{cc.attrs.fieldcolor}.png" />
            </c:if>
            <c:if test="#{cc.attrs.player!=-1}">
                <img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.startingfield} #{msg.player} #{cc.attrs.fieldcolor}: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.startingfield} #{msg.player} #{cc.attrs.fieldcolor}: #{msg.player} #{cc.attrs.player}" src="./resources/img/field#{cc.attrs.fieldcolor}_player#{cc.attrs.player}.png" />
            </c:if>  
        </c:if>
        <c:if test="#{cc.attrs.startingsquare==false and cc.attrs.homebase==true}">
            <c:if test="#{cc.attrs.player==-1}">
                <img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.goal} #{msg.player} #{cc.attrs.fieldcolor}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.goal} #{msg.player} #{cc.attrs.fieldcolor}" src="./resources/img/field#{cc.attrs.fieldcolor}.png" />
            </c:if>
            <c:if test="#{cc.attrs.player!=-1}">
                <img id="field#{cc.attrs.fieldnumber}" title="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.goal} #{msg.player} #{cc.attrs.fieldcolor}: #{msg.player} #{cc.attrs.player}" alt="#{msg.field} #{cc.attrs.fieldnumber}: #{msg.goal} #{msg.player} #{cc.attrs.fieldcolor}: #{msg.player} #{cc.attrs.player}" src="./resources/img/field#{cc.attrs.fieldcolor}_player#{cc.attrs.player}.png" />
            </c:if>  
        </c:if>
        
    </composite:implementation>
</html>